<template>
  <view class="container">
    <view class="header">
      <view class="back-arrow" @click="navigateBack"></view>
      <text class="title">报表中心</text>
    </view>
    <view class="list">
      <view class="list-item" v-for="(item, index) in items" :key="index">
        <view class="left">
          <view class="icon-wrapper" :style="{ backgroundColor: item.iconBgColor }">
            <image class="icon" :src="item.icon"></image>
          </view>
        </view>
        <view class="content">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-subtitle">{{ item.subtitle }}</view>
          <view class="tags">
            <view
              class="tag"
              v-for="(tag, tIndex) in item.tags"
              :key="tIndex"
              :style="{ backgroundColor: tag.bgColor, color: tag.textColor }"
            >
              <text>{{ tag.text }}</text>
            </view>
          </view>
        </view>
        <view class="right">
          <view v-if="item.hasRedDot" class="red-dot"></view>
          <image class="right-icon" src="@/static/images/report/right.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Tag {
  text: string
  bgColor: string
  textColor: string
}

interface ListItem {
  icon: string
  iconBgColor: string
  title: string
  subtitle: string
  tags: Tag[]
  hasRedDot: boolean
}

const items = ref<ListItem[]>([
  {
    icon: '/static/images/report/icon1.png',
    iconBgColor: '#fef7e7',
    title: '进店领代金券',
    subtitle: '创建条件优惠吸引更多客流',
    tags: [
      { text: '拉新', bgColor: '#e0f5e0', textColor: '#00b510' },
      { text: '引流', bgColor: '#e7effe', textColor: '#007aff' },
    ],
    hasRedDot: true,
  },
  {
    icon: '/static/images/report/icon2.png',
    iconBgColor: '#e7fee9',
    title: '店铺满减',
    subtitle: '下单满足条件可享受减免',
    tags: [
      { text: '促销', bgColor: '#ffe0e0', textColor: '#f54343' },
    ],
    hasRedDot: true,
  },
  {
    icon: '/static/images/report/icon3.png',
    iconBgColor: '#fcf4ec',
    title: '下单满返代金券',
    subtitle: '下单满足条件送代金券',
    tags: [
      { text: '奖励', bgColor: '#fff5e0', textColor: '#f5a623' },
    ],
    hasRedDot: false,
  },
  {
    icon: '/static/images/report/icon4.png',
    iconBgColor: '#ecf9fc',
    title: '店铺满赠',
    subtitle: '下单满足条件赠送商品',
    tags: [
      { text: '提高营业额', bgColor: '#e7fee9', textColor: '#00b510' },
    ],
    hasRedDot: false,
  },
  {
    icon: '/static/images/report/icon5.png',
    iconBgColor: '#fcecec',
    title: '商品推荐活动',
    subtitle: '低门槛可用，商品推荐率做成长主',
    tags: [
      { text: '汇聚推荐活动', bgColor: '#fee7e7', textColor: '#ff0000' },
    ],
    hasRedDot: false,
  },
])

const navigateBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 88rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.back-arrow {
  position: absolute;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  background: url("@/static/images/back.png") no-repeat center;
  background-size: contain;
}
.title {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.list {
  display: flex;
  flex-direction: column;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.left {
  margin-right: 20rpx;
}
.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
}
.icon {
  width: 80rpx;
  height: 80rpx;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-title {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
}
.item-subtitle {
  font-size: 24rpx;
  color: rgba(154, 156, 161, 1);
  font-weight: 500;
  margin-top: 10rpx;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}
.tag {
  border-radius: 4rpx;
  padding: 8rpx 12rpx;
  font-size: 20rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
}
.right {
  display: flex;
  align-items: center;
}
.red-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: red;
  border-radius: 50%;
  margin-right: 8rpx;
}
.right-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
